@extends('home.layout.base')
<link rel="stylesheet" href="{{URL::asset('./css/demand/add.css')}}">
@section('content')
<div class="mainHrContent" id="demandAdd">
    <div class="demandadd_left">
        <div>
            <div class="demandadd_step">
                <em>1</em>商品信息
            </div>
            <div class="demandadd_main">
                <el-form label-position="top" size="mini" :rules="rules">
                    <el-form-item label="商品标题" prop="name">
                        <el-input placeholder="字数限制20字以内"></el-input>
                    </el-form-item>
                    <el-form-item label="商品封面图" prop="name">
                        <el-upload class="avatar-uploader" :action="uploadUrl" :show-file-list="false" :on-success="handleAvatarSuccessimg" :before-upload="beforeAvatarUpload">
                            <img v-if="imageUrl" :src="imageUrl" class="avatar">
                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                        </el-upload>
                    </el-form-item>
                    <el-form-item label="商品描述" prop="name">
                        <el-upload class="upload-demo" :action="uploadUrl" :on-remove="handleRemove" :on-error='handleErro' :on-success="handleAvatarSuccess" list-type="picture" :file-list="fileList">
                            <span class="addPicture">
                                <img src="{{URL::asset('./img/icon/addPicture.png')}}">
                                添加图片
                            </span>
                            <!-- <div slot="tip" class="el-upload__tip">只能上传jpg/png文件</div> -->
                        </el-upload>
                        <el-input type="textarea" rows="10">
                        </el-input>
                    </el-form-item>
                    <el-row :gutter="25">
                        <el-col :span="12">
                            <el-form-item label="商品类型" prop="name">
                                <el-select placeholder="请选择">
                                    <el-option v-for="item in 3" :key="item" :label="item" :value="item">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="商品类别" prop="name">
                                <el-select placeholder="请选择">
                                    <el-option v-for="item in 3" :key="item" :label="item" :value="item">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row :gutter="25">
                        <el-col :span="12">
                            <el-form-item label="商品价格（单位：人民币 元）" prop="name">
                                <el-input></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </div>
        </div>
        <div>
            <div class="demandadd_step">
                <em>2</em>联系信息
            </div>
            <div class="demandadd_main">
                <el-form label-position="top" size="mini" :rules="rules">
                    <el-row :gutter="25">
                        <el-col :span="12">
                            <el-form-item label="联系人" prop="name">
                                <el-input></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="联系人电话" prop="name">
                                <el-input></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row :gutter="25">
                        <el-col :span="12">
                            <el-form-item label="部门" prop="name">
                                <el-input></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="职位" prop="name">
                                <el-input></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </div>
        </div>
        <button>发布产品</button>
    </div>
    <div class="demandadd_right">
        <div class="recommendStore">
            <div class="recommendStore_store">
                <img src="{{URL::asset('./img/icon/recommend.png')}}" alt="...">
                热门活动
            </div>
            <div class="recommendStore_list" v-for="item in 3">
                <img src="" alt="...">
                <div class="recommendStoreDetails">
                    <div class="recommendStoreDetails_name">
                        <div>供应商名称供应商名称</div>
                        <img src="{{URL::asset('./img/icon/storeColloct.png')}}" alt="...">
                        <img src="{{URL::asset('./img/icon/storeHot.png')}}" alt="...">

                    </div>
                    <div class="recommendStoreDetails_mes">
                        <span>
                            <img src="{{URL::asset('./img/icon/storeListTel.png')}}" alt="...">
                            999+
                        </span>
                        <span>
                            <img src="{{URL::asset('./img/icon/storeListZan.png')}}" alt="...">
                            999+
                        </span>
                    </div>
                    <div class="recommendStoreDetails_mes">
                        <span>
                            <img src="{{URL::asset('./img/icon/storeListEye.png')}}" alt="...">
                            999+
                        </span>
                        <span>
                            <img src="{{URL::asset('./img/icon/storeListNote.png')}}" alt="...">
                            999+
                        </span>
                    </div>
                    <button class="recommendStoreDetails_button">
                        <a> 查看</a>
                    </button>
                </div>
            </div>
            <img src="" alt="...">
        </div>
    </div>
</div>

@endsection
@section('scripts')
<script>
    $(() => {
        let demandAdd = new Vue({
            el: '#demandAdd',
            data: () => {
                return {
                    uploadUrl: UPLOAD_FILE,
                    fileList: [],
                    imageUrl: '',
                    rules: {
                        name: [{
                            required: true,
                            message: '请输入需求标题',
                            trigger: 'blur'
                        }],
                    }
                }
            },
            created() {},
            mounted() {},
            methods: {
                handleErro() {
                    this.$message.error('上传失败');
                },
                beforeAvatarUpload(file) {
                    const isJPG = file.type === 'image/jpeg';
                    const isLt2M = file.size / 1024 / 1024 < 2;

                    if (!isJPG) {
                        this.$message.error('上传头像图片只能是 JPG 格式!');
                    }
                    if (!isLt2M) {
                        this.$message.error('上传头像图片大小不能超过 2MB!');
                    }
                    return isJPG && isLt2M;
                },
                handleAvatarSuccessimg(res, file) {
                    this.imageUrl = URL.createObjectURL(file.raw);
                },
                handleAvatarSuccess(res, file) {
                    this.fileList.push(res.data.path)
                },
                handleRemove(file, fileList) {
                    this.fileList = [];
                    fileList.forEach(element => {
                        this.fileList.push(element.response.data.path)
                    });
                },
            }
        })
    })
</script>
@endsection